<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<!-- <a href="https://twitter.com/rominamartinlib" target="_blank">
  <svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
    <path d="
    M 630, 425
    A 195, 195 0 0 1 331, 600
    A 142, 142 0 0 0 428, 570
    A  70,  70 0 0 1 370, 523
    A  70,  70 0 0 0 401, 521
    A  70,  70 0 0 1 344, 455
    A  70,  70 0 0 0 372, 460
    A  70,  70 0 0 1 354, 370
    A 195, 195 0 0 0 495, 442
    A  67,  67 0 0 1 611, 380
    A 117, 117 0 0 0 654, 363
    A  65,  65 0 0 1 623, 401
    A 117, 117 0 0 0 662, 390
    A  65,  65 0 0 1 630, 425
    Z" style="fill:#3BA9EE;" />
  </svg>
</a> -->
<div class="options">
  <button id="americano">Americano</button>
  <button id="au_lait">Au lait</button>
  <button id="capuccino">Capuccino</button>
  <button id="corretto">Corretto</button>
  <button id="espresso">Espresso</button>
  <button id="latte">Latte</button>
  <button id="lungo">Lungo</button>
  <button id="macchiato">Macchiato</button>
  <button id="mocha">Mocha</button>
  <button id="ristretto">Ristretto</button>
</div>
<div class="container">
  <h1 class="coffee_name">Choose your coffee</h1>
  <div class="cup">
    <div class="filling reset">
      <div class="coffee">Coffee</div>
      <div class="water">Water</div>
      <div class="liquor">Liquor</div>
      <div class="milk">Milk</div>
      <div class="whipped_cream">Whipped cream</div>
      <div class="milk_foam">Milk foam</div>
      <div class="steamed_milk">Steamed milk</div>
      <div class="chocolate">Chocolate</div>
    </div>
    <div class="plate"></div>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>